<script setup lang="ts">
import type { payKeyItem } from '@/types/pay'

import { computed, reactive, ref } from 'vue'

const radioValue = ref<string>('ALIPAY')

const themeColorList = {
  yellow: '#f7920d',
  blue: '#1677FF',
  red: '#E52E2E',
  pagebg: '#f4f5f9',
}
const theme = computed(() => themeColorList[THEME])
const channelList = ref<payKeyItem[]>([
  {
    provider: 'ALIPAY',
    provider_channel_type: 'NORMAL',
    icon: 'zhifubao-circle-fill',
    name: '支付宝',
  },
  {
    provider: 'WECHAT',
    provider_channel_type: 'NORMAL',
    icon: 'weixin-circle-fill',
    name: '微信',
  },
])
const paymentChannel = reactive({
  provider: 'ALIPAY',
  provider_channel_type: 'NORMAL',
})

function handlePaymentSelect(e: any) {
  // radioValue.value = e.provider
  paymentChannel.provider = e.provider
  paymentChannel.provider_channel_type = e.provider_channel_type
}

function getPaymentChannel() {
  return paymentChannel
}

defineExpose({
  getPaymentChannel,
})
</script>

<template>
  <view>
    <uv-radio-group
      v-model="radioValue"
      placement="column"
      icon-placement="right"
    >
      <uv-radio
        v-for="(item, index) in channelList"
        :key="index"
        :label="item.provider"
        :name="item.provider"
        :active-color="theme"
        size="24"
        @change="handlePaymentSelect(item)"
      >
        <template #default>
          <view class="mt-2 h-70px flex items-center">
            <uv-icon :name="item.icon" :color="theme" size="28"></uv-icon>
            <view class="ml-2">{{ item.name }}</view>
          </view>
        </template>

      </uv-radio>
    </uv-radio-group>
  </view>
</template>
